<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" type="text/css" href="element-ui/lib/theme-chalk/index.css"/>
    <script src="js/vue.min.js"></script>
    <script src="element-ui/lib/index.js"></script>
    <script src="js/axios.min.js"></script>
<style>
    .el-header, .el-footer {
        background-color: #B3C0D1;
        color: #333;
        text-align: center;
        line-height: 60px;

    }

    .el-aside {
        background-color: #D3DCE6;
        color: #333;
        text-align: center;
        line-height: 200px;
    }

    .el-main {
        background-color: #E9EEF3;
        color: #333;
        text-align: center;
        line-height: 160px;
        height: 85vh;
    }

    body > .el-container {
        margin-bottom: 40px;
    }

    .el-container:nth-child(5) .el-aside,
    .el-container:nth-child(6) .el-aside {
        line-height: 260px;
    }

    .el-container:nth-child(7) .el-aside {
        line-height: 320px;
    }
</style>

</head>
<body>
<div id="app">
    <el-container>
        <el-header>Header</el-header>
        <el-main>
            <el-row>
                <el-col :span="8" offset="8" >
                    <div class="grid-content bg-purple-dark" style="margin-top: 10vh">

                        <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
                            <el-form-item label="账号" prop="username">
                                <el-input v-model="ruleForm.username" @change="checkUsername">
                                </el-input>
                                <span v-html="usernameMessage"></span>
                            </el-form-item>
                            <el-form-item label="密码" prop="password">
                                <el-input show-password v-model="ruleForm.password"></el-input>

                            </el-form-item>

                            <el-form-item label="姓名" prop="realname">
                                <el-input v-model="ruleForm.realname"></el-input>
                            </el-form-item>

                            <el-form-item label="电话" prop="phone">
                                <el-input v-model="ruleForm.phone"></el-input>
                            </el-form-item>

                            <el-form-item label="头像" style="text-align: left;">
                                <el-upload
                                        class="upload-demo"
                                        action="/account/image"
                                        :on-success="upSuccess"
                                        :before-upload="beforeAvatarUpload"
                                        :on-remove="handleRemove"
                                        limit="1"
                                        list-type="picture">
                                    <el-button size="small" type="primary">点击上传</el-button>
                                    <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
                                </el-upload>
                            </el-form-item>

                            <el-form-item>
                                <el-button type="primary" @click="submitForm('ruleForm')">注册</el-button>
                                <el-button @click="resetForm('ruleForm')">重置</el-button>
                               <a href="login.html" style="color: #ef08e2;">已有账号，去登录</a>
                            </el-form-item>
                        </el-form>

                    </div>
                </el-col>
            </el-row>

        </el-main>
        <el-footer>Footer</el-footer>
    </el-container>

</div>
</body>

<script>

    let vu = new Vue({
        el:"#app",
        data:{
            ruleForm: {
                username: '',
                password: '',
                realname: '',
                phone: '',
                image:''
            },
            usernameMessage:'',
            rules: {
                username: [
                    { required: true, message: '请输入账号名', trigger: 'blur'},
                    { min: 6, max: 18, message: '长度在 6 到 18 个字符', trigger: 'blur' },
                    {pattern:/^[a-zA-Z][A-Za-z0-9]+/,message: "字母开头，由字母或数字组成"},
                ],
                password:[
                    { required: true, message: '请输入密码', trigger: 'blur' },
                    { min: 6, max: 12, message: '长度在 6 到 12 个字符', trigger: 'blur' },
                    {pattern:/[A-Za-z0-9]+/,message: "由字母或数字组成"}
                ],
                realname:[
                    { required: true, message: '请输入姓名', trigger: 'blur' },
                    { min: 2, message: '2个以上的汉字', trigger: 'blur' },
                    {pattern:/^[\u4e00-\u9f5a]{2,}/,message: "请输入正确的姓名"}
                ]
            }

        },
        methods:{
            /*验证账号是否存在*/
            checkUsername(){
                axios.get(`/account/username/${vu.ruleForm.username}`).then(resp=>{

                    let bl = resp.data;

                    //判断验证结果
                    if(bl==true){
                        vu.usernameMessage="<font color='green'>√√√</font>";
                    }else{
                        vu.usernameMessage="<font color='red'>账号已存在</font>";
                    }
                })

            },
            /*提交表单*/
            submitForm(formName){
                this.$refs[formName].validate((valid) => {
                    if (valid) {

                        axios.post("/account",{
                            accUsername:vu.ruleForm.username,
                            accPassword:vu.ruleForm.password,
                            accRealname:vu.ruleForm.realname,
                            accPhone:vu.ruleForm.phone,
                            accImage:vu.ruleForm.image
                        }).then(resp=>{
                            if (resp.data==true){
                                alert("注册成功");
                            }else{
                                alert("注册失败");
                            }
                        })
                    } else {
                        console.log('error submit!!');
                        return false;
                    }
                });
            },
            resetForm(formName) {
                this.$refs[formName].resetFields();
            },

            //移除
            handleRemove(file, fileList) {
                let nf = file.name;
                //获取文件名，提交到controller
                axios.delete(`/account/image/${nf}/`).then(resp=>{
                    alert(resp.data)
                })

            },

            //上传成功
            upSuccess(res,file){
                //把缩略图名称改为上传之后新名称
                file.name = res;
                vu.ruleForm.image=res;
            },

            //格式校验
            beforeAvatarUpload(file) {
                const isJPG = file.type === 'image/jpeg';

                const isLt2M = file.size / 1024 / 1024 < 2;

                if (!isJPG) {
                    this.$message.error('上传头像图片只能是 JPG 格式!');
                }
                if (!isLt2M) {
                    this.$message.error('上传头像图片大小不能超过 2MB!');
                }
                return isJPG && isLt2M;
            }


        }


    })

</script>
</html>